<template>
  <div id="reply-section">
    <div v-if="replies != null && replies.length != 0">
      <single-reply v-for="reply in replies" :key="reply.id" :reply="reply"></single-reply>
    </div>
    <div v-else>
      <p>暂无回复</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import SingleReply from '@/components/comment/SingleReply.vue'
import { useArticleManageStore } from '@/stores/useArticleManageStore'
import type { CommentReply } from '@/utils/dataType/ArticleModel'
import { computed, onMounted } from 'vue'

//接收传递过来的顶层评论id
const props = defineProps({
  topId: Number,
})
const replies = computed(() => {
  return articleManageStore.replies[props.topId] ?? ([] as CommentReply[])
}) //响应式回复集合
const articleManageStore = useArticleManageStore()
// onBeforeMount(async () => {
//   try {
//     const res = await articleManageStore.fetchReply(Number(props.topId)) //查询出来的评论
//     Object.assign(replies, res)
//   } catch (error) {
//     ElMessage.error(String(error))
//   }
// })
const fetch = async () => {
  const res = await articleManageStore.fetchReply(Number(props.topId))
}
onMounted(fetch)
</script>

<style></style>
